<!--
  @文件名：dots
  @来源：Winford.Wang|2022/6/23 0023，21:26
  @描述：圆点宠物
-->
<template>
  <div class="dots" v-drag ref="dotsRefs" @contextmenu="rightClick" >
  </div>
  <template v-if="dotsSettingShow">
    <div class="stencil">
      <div class="dots_setting" ref="dotsSettingRefs">
        <div class="contextmenu-child" @click="seitchColor">切换颜色</div>
        <div class="contextmenu-child">其它</div>
      </div>
    </div>
  </template>
</template>

<script>

export default {
  name: 'dots',
  data () {
    return {
      dotsSettingShow: false,
      timeInstall: null
    }
  },
  created () {

  },
  mounted () {

  },
  activated () {

  },
  methods: {
    rightClick(e) {
      this.rightShow(true)
      const evt = e
      const _this = this
      const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
      const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      this.$nextTick(function () {
        const dom = this.$refs.dotsSettingRefs
        const domWeight = dom.offsetWidth
        const domHeight = dom.offsetHeight
        // 给left和top分别赋值为鼠标的位置；
        dom.style.left = evt.pageX + 'px';
        dom.style.top = evt.pageY + 'px';
        // 如果鼠标右边放不下菜单，就把left的值的改了
        if (evt.pageX + domWeight > clientWidth + scrollLeft) { // 菜单应该在鼠标左边；
          const left1 = evt.pageX - domWeight;
          dom.style.left = left1 + 'px';
        }
        // 如果鼠标下边放不下菜单，就把top的值的改了
        if (evt.pageY + domHeight > clientHeight + scrollTop) {
          const top1 = (evt.pageY - domHeight);
          dom.style.top = top1 + 'px';
        }
        window.addEventListener('click', cb)
        // 判断点击是否在元素外部
        function cb(even) {
          const isinner = dom.contains(even.target)
          const ismenuchild = even.target.className === 'contextmenu-child'
          if (!isinner || ismenuchild) {
            _this.rightShow(false)
            window.removeEventListener('click', cb)
          }
        }
      })
    },
    rightShow(data) {
      this.dotsSettingShow = data
    },
    seitchColor() {
      this.$refs.dotsRefs.style.backgroundColor = this.getRGB(0, 255)
    },
    getRandom(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; // 含最大值，含最小值
    },
    getRGB(min, max) {
      var c1 = this.getRandom(min, max)
      var c2 = this.getRandom(min, max)
      var c3 = this.getRandom(min, max)
      return 'rgb(' + c1 + ',' + c2 + ',' + c3 + ')'
    },
    moveDom() {
      const dom = this.$refs.dotsRefs
      const _this = this
      if (this.timeInstall) clearInterval(this.timeInstall)
      this.timeInstall = setInterval(function () {
        const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const weight = dom.offsetLeft + dom.offsetWidth
        if (clientWidth > weight) {
          dom.style.left = (dom.offsetLeft + 1) + 'px'
        }
        else {
          if (_this.timeInstall) clearInterval(_this.timeInstall)
        }
      }, 20)
    }
  },
  deactivated () {

  },
  unmounted () {
    if (this.timeInstall) clearInterval(this.timeInstall)
  },
  components: {}
}
</script>

<style scoped lang='scss'>
.dots {
  position: absolute;
  bottom: 10px;
  left: 10px;
  pointer-events: auto;
  background-color:  $--color-primary;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 1;
}
.stencil{
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  left: 0;
  top: 0;
  pointer-events: auto;
  .dots_setting{
    box-shadow: $--box-shadow-lighter;
    background-color: $--color-next;
    padding: 5px 10px;
    position: absolute;
    z-index: 2;
    border-radius: 4px;
    .contextmenu-child{
      font-size: 14px;
      cursor: pointer;
    }
    .contextmenu-child:hover{
      color:  $--color-primary;
    }
    .contextmenu-child:not(.contextmenu-child:first-child){
      border-top: 1px solid $--border-color;
    }
  }
}

</style>
